<template>
  <!--粘棒记录-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>开始时间</label>
      <!--<el-input type="date" v-model="searchList.startDate"></el-input>-->
      <el-date-picker
        v-model="startDate"
        type="datetime"
        placeholder="选择日期时间">
      </el-date-picker>
      <label>结束时间</label>
      <!--<el-input type="date" v-model="searchList.endDate"></el-input>-->
      <el-date-picker
        v-model="endDate"
        type="datetime"
        placeholder="选择日期时间">
      </el-date-picker>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <highcharts :options="options01" ref="highCharts01"  class="highChart01" style="width:100%" :style="{height: tableHeight+ 'px'}"></highcharts>
  </div>
</template>

<script>

  import * as QualificationRate from "../../../api/report/qualificationRate";
  var moment = require('moment');
  const options01 = {

    credits:{
      enabled: false // 禁用版权信息
    },
    chart: {
    },
    title: {
      text: '检验合格率'
    },
    subtitle: {
      text: null,
    },
    xAxis: {
      categories: [],
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
    },
    yAxis: {
      title: {
        align: 'high',
        offset: 0,
        text: '合格率(%)',
        rotation: 0,
        x: 100,
        y: 20,
        style: {
          color: '#000',
          fontSize: '14px',
        }
      },
      lineWidth: 1,
      lineColor: '#000',
      gridLineWidth: 0,
      endOnTick: false,
      labels: {
        style: {
          color: '#000',
          fontSize: '14px',
        }
      }
    },
    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">合格率: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },
    series: [],

  };
  export default {
    components: {

    },
    data() {
      return {
        searchList: {startDate: '',endDate: ''},
        options01: options01,
        startDate: '',
        endDate: '',
      }

    },
    created() {
      /*this.searchList.startDate = moment().subtract(9, 'days').format('YYYY-MM-DD 08:30:00');
      this.searchList.endDate = moment().format('YYYY-MM-DD 08:30:00');
      this.fetchData();*/
    },
    mounted () {
      this.startDate = moment.utc(moment().subtract(1, 'days').format('YYYY-MM-DD 00:30:00')).format();
      this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
      this.searchRows();
    },
    methods: {
      fetchData() {
       /* this.searchList.startDate = moment(this.searchList.startDate).format('YYYY-MM-DD HH:mm:ss');
        this.searchList.endDate = moment(this.searchList.endDate).format('YYYY-MM-DD HH:mm:ss');*/
        QualificationRate.getList(this.searchList).then(data => {
            for(var i in data){
                if(data[i].qualifiedRate) {
                  data[i].qualifiedRate = (data[i].qualifiedRate)*100;
                }

            }
          if(this.$refs.highCharts01.chart.series.length > 0) {
            this.$refs.highCharts01.chart.series[0].remove(true);
          }
          var obj = {
            name: '检验合格率',
            data: []
          }
          var categorys = [];
          for(var i in data) {
            categorys.push(data[i].monthDay);
            obj.data.push(data[i].qualifiedRate);
          }
          /*副标题 计算时间差*/
          var day1 = moment(this.searchList.startDate);
          var day2 = moment(this.searchList.endDate);
          var duration = moment.duration(day2.diff(day1));
          var result = Math.ceil(`${duration.asDays()}`);  //默认时间是第一天的8:30到第二天的8:29,所以要上取整
          this.$refs.highCharts01.chart.update({
            xAxis: {
              categories: categorys
            },
            subtitle: {
              text: result+'日合格率',
            },
          });
          this.$refs.highCharts01.chart.addSeries(obj, true);
        })
      },
      searchRows() {
        if( !this.startDate == ''){
          this.searchList.startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.startDate = ''
        }
        if(!this.endDate == ''){
          this.searchList.endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.searchList.endDate = ''
        }
        this.fetchData()
      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      }
    }
  }
</script>
